<template>
  <div :class="`flex flex-col pb-4 ${animationClass}`">
    <div
      class="border rounded-lg py-3 px-4"
      :style="{
        background: 'linear-gradient(135deg, #e0e7ff 0%, #eef2ff 100%)',
        boxShadow: '0 4px 12px rgba(129, 140, 248, 0.1), 0 2px 4px rgba(129, 140, 248, 0.05)',
        borderRadius: '8px',
        borderColor: 'rgba(129, 140, 248, 0.3)',
        borderWidth: '1px',
        position: 'relative',
        overflow: 'hidden',
      }"
    >
      <div
        class="absolute top-0 bottom-0 left-0 w-1"
        :style="{ background: `linear-gradient(to bottom, ${ROUTER_DOT_COLOR}, transparent)` }"
      ></div>
      <div class="flex">
        <div class="flex items-center min-w-[75px]">
          <div
            class="w-6 h-6 rounded-md flex items-center justify-center mr-2 bg-[#eef2ff] text-[#818cf8] shadow-sm"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="5" r="3"></circle>
              <path d="M12 8v3"></path>
              <path d="M5 16v-3h14v3"></path>
              <path d="M5 16l3 4"></path>
              <path d="M19 16l-3 4"></path>
              <path d="M12 11l-3 9"></path>
              <path d="M12 11l3 9"></path>
            </svg>
          </div>
          <div class="text-sm font-medium text-[#818cf8]">路由器</div>
        </div>
        <!-- 路由详情一行显示 -->
        <div class="flex-1 flex items-center">
          <div class="flex items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#818cf8"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="mr-1.5"
            >
              <line x1="5" y1="12" x2="19" y2="12"></line>
              <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
            <span class="text-sm text-[#818cf8] mr-1.5">分配</span>
            <div class="flex items-center">
              <div
                class="flex items-center justify-center rounded-full mr-1 w-4 h-4"
                :style="{
                  backgroundColor: targetColor,
                  color: '#fff',
                  fontSize: '0.6rem',
                  fontWeight: 'bold',
                }"
              >
                {{ targetAgentNumber }}
              </div>
              <span class="text-sm" :style="{ color: targetColor }">
                {{ routerData.name }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const routerData = defineModel("routerData");

const hexToRgb = inject("hexToRgb");
const agentNumberMap = inject("agentNumberMap");
const targetColorConfig = inject("colorConfig");
const targetColor = targetColorConfig.primary;
const targetBgColor = targetColorConfig.secondary;

const targetAgentNumber = agentNumberMap.value.get(routerData.value.name);
const props = defineProps({
  animationClass: String,
  agentBgColor: String,
  agentColor: String,
  agentIcon: String,
});

const ROUTER_DOT_COLOR = inject("ROUTER_DOT_COLOR");
</script>

<style lang="scss" scoped></style>
